<template>
  <div style="width:100%,overflow:hidden">
    <van-nav-bar>
      <template #title>
        <span class="banner-tit">京东自营·</span>
        <span class="banner-tit">品类多元·</span
        ><span class="banner-tit">专属客服·</span
        ><span class="banner-tit">售后保障</span>
      </template>
    </van-nav-bar>
    <!-- 背景 -->
    <div class="lunbobg">
      <div
        v-if="type == 0"
        :style="{
          backgroundImage:
            'url(' + `${baseURL}/jd_card/index/lunbo1/${carousel[type].images}` + ')',
        }"
      ></div>
      <div
        v-else-if="type == 1"
        :style="{
          backgroundImage:
            'url(' + `${baseURL}/jd_card/index/lunbo1/${carousel[type].images}` + ')',
        }"
      ></div>
      <div
        v-else-if="type == 2"
        :style="{
          backgroundImage:
            'url(' + `${baseURL}/jd_card/index/lunbo1/${carousel[type].images}` + ')',
        }"
      ></div>
      <div
        v-else-if="type == 3"
        :style="{
          backgroundImage:
            'url(' + `${baseURL}/jd_card/index/lunbo1/${carousel[type].images}` + ')',
        }"
      ></div>
      <div
        v-else
        :style="{
          backgroundImage:
            'url(' + `${baseURL}/jd_card/index/lunbo1/${carousel[type].images}` + ')',
        }"
      ></div>
    </div>
    <div class="white"></div>
    <van-swipe class="lunbo1" :autoplay="3000" :width="300" @change="onchange">
      <van-swipe-item class="lunbo11 lb" v-for="(item, i) of carousel" :key="i">
        <div
          :style="{
            backgroundImage:
              'url(' + `${baseURL}/jd_card/index/lunbo1/${item.images}` + ')',
          }"
        ></div>
        <p class="swipe-tit">{{ item.tit }}</p>
        <p class="swipe-tit-sub">{{ item.sub }}</p>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/5</div>
      </template>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: "0",
      current: 0,
      carousel: {
        0: {
          images: "1.jpg",
          tit: "京东 X KPL 联名礼品卡",
          sub: "独家限量发售",
          herf: "1",
        },
        1: {
          images: "2.jpg",
          tit: "实名购卡指南",
          sub: "更安全更放心",
          herf: "#2",
        },
        2: {
          images: "3.jpg",
          tit: "京东卡狂欢开启",
          sub: "E卡传真情",
          herf: "#3",
        },
        3: {
          images: "4.jpg",
          tit: "京东礼品卡使用说明",
          sub: "全流程图文解析",
          herf: "#4",
        },
        4: {
          images: "5.jpg",
          tit: "京东卡券超市",
          sub: "品牌8折起",
          herf: "#5",
        },
      },
    };
  },
  methods: {
    onchange(index) {
      this.current = index;
      this.type = index;
    },
    // goto(herf) {
    //   this.$router.push(`/${herf}`);
    // },
  },
};
</script>
<style scoped lang='scss'>
.van-nav-bar {
  background-color: transparent;
}
.van-hairline--bottom::after {
  border-bottom-width: 0rem !important;
}
.banner-tit {
  font-size: .75rem;
}
.lunbobg {
  width: 100%;
  height: 12.5rem;
  z-index: -1;
  position: relative;
  filter: blur(2.1875rem);
  > div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
  }
}
.white {
  position: absolute;
  top: 7.8125rem;
  width: 100%;
  height: 7.5625rem;
  background-image: linear-gradient(
    -10deg,
    white 3.125rem 6.25rem,
    rgba(0, 0, 0, 0) 0 3.125rem
  );
  z-index: 0;
}
.lunbo1 {
  width: 100%;
  position: absolute;
  top: 3.125rem;
  .lb {
    > div {
      width: 80%;
      height: 9.375rem;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: .3125rem;
      box-shadow: 0 .375rem .75rem 0 rgba(0, 0, 0, 0.2),
        0 .375rem 1.25rem 0 rgba(0, 0, 0, 0.19);
    }
    p {
      display: block;
      margin: 0 1.875rem;
    }
    .swipe-tit {
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
  .custom-indicator {
    position: absolute;
    top: 0;
  }
}
</style>
